<template>
    <div class="page-container">
        <el-card class="box-card">
            <el-row class="row-bg" style="margin-top: 30px;">
                <el-col :span="7">
                    <el-card class="card-box" shadow="hover">
                        <div class="card-title-box">
                            <img :src="icon.wechatAppIcon" style="width: 30px; height: 30px; margin-right: 10px;" />
                            <div >小程序微信支付</div>
                            <div class="open-or-close">
                                <el-popover placement="top-start" :width="330" trigger="hover">
                                    <template #reference>
                                        <el-icon style="font-size: 28px;" ><ele-WarningFilled style="color: rgb(255, 113, 75); margin-right: 10px;"/></el-icon>
                                    </template>
                                    <template #default>
                                        配置小程序微信支付需先授权小程序，
                                        <a href="javascript:;" style="color: red;" @click="goAuthPage(0)">立即授权</a>
                                    </template>
                                </el-popover>
                                <el-switch v-model="openSwitch.wechatApp" size="small" @click="editPaySetting('0', openSwitch.wechatApp)"/>
                            </div>
                        </div>
                        <div class="card-center-txt">
                            配置后，买家在小程序下单可使用微信支付
                        </div>
                        <el-divider />
                        <div class="go-setting">                            
                            <i class="fa fa-gg" aria-hidden="true"></i>                                    
                            <span style="margin-left: 5px;" @click="goAuthPage(2)">去配置</span>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="7">
                    <el-card class="card-box" shadow="hover">
                        <div class="card-title-box">
                            <img :src="icon.wechatWebIcon" style="width: 30px; height: 30px; margin-right: 10px;" />
                            <div>网站微信支付</div>
                            <div class="open-or-close">
                                <el-popover placement="top-start" :width="320" trigger="hover">
                                    <template #reference>
                                        <el-icon style="font-size: 28px;" ><ele-WarningFilled style="color: rgb(255, 113, 75); margin-right: 10px;"/></el-icon>
                                    </template>
                                    <template #default>
                                        配置微信支付需商家有顶级备案域名，
                                        <a href="javascript:;" style="color: red;" @click="goAuthPage(1)">去添加</a>
                                    </template>
                                </el-popover>
                                <el-switch v-model="openSwitch.wechatWeb" size="small" @click="editPaySetting('1', openSwitch.wechatWeb)"/>
                            </div>
                        </div>
                        <div class="card-center-txt">
                            配置后，买家在电脑网站/微信客户端及微信客户端外的浏览器可使用微信支付下单购买
                        </div>
                        <el-divider />
                        <div class="go-setting">
                            <i class="fa fa-gg" aria-hidden="true"></i>
                            <span style="margin-left: 5px;" @click="goAuthPage(2)">去配置</span>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="7">
                    <el-card class="card-box" shadow="hover">
                        <div class="card-title-box">
                            <img :src="icon.aliPayIcon" style="width: 30px; height: 30px; margin-right: 10px;" />
                            <div>支付宝支付</div>
                            <div class="open-or-close">
                                <el-switch v-model="openSwitch.aliPay" size="small" @click="editPaySetting('2', openSwitch.aliPay)"/>
                            </div>
                        </div>
                        <div class="card-center-txt">
                            配置后，买家在电脑网站/移动端网页下单时可使用支付宝支付
                        </div>
                        <el-divider />
                        <div class="go-setting">
                            <i class="fa fa-gg" aria-hidden="true"></i>
                            <span style="margin-left: 5px;" @click="goAuthPage(2)">去配置</span>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="7">
                    <el-card class="card-box" shadow="hover">
                        <div class="card-title-box">
                            <img :src="icon.ebankIcon" style="width: 30px; height: 30px; margin-right: 10px;" />
                            <div>网银支付</div>
                            <div class="open-or-close">
                                <el-switch v-model="openSwitch.ebank" size="small" @click="editPaySetting('3', openSwitch.ebank)"/>
                            </div>
                        </div>
                        <div class="card-center-txt">
                            配置后，买家在电脑网站可以选择网银进行支付，支持企业网银，个人网银
                        </div>
                        <el-divider />
                        <div class="go-setting">
                            <i class="fa fa-gg" aria-hidden="true"></i>
                            <span style="margin-left: 5px;" @click="goAuthPage(2)">去配置</span>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="7">
                    <el-card class="card-box" shadow="hover">
                        <div class="card-title-box">
                            <img :src="icon.bankCardIcon" style="width: 30px; height: 30px; margin-right: 10px;" />
                            <div>银行转账</div>
                            <div class="open-or-close">
                                <el-switch v-model="openSwitch.bankCard" size="small" @click="editPaySetting('4', openSwitch.bankCard)"/>
                            </div>
                        </div>
                        <div class="card-center-txt">
                            填写好收款银行账户后，买家自行操作线下转账，卖家需要人工查看收款及调整订单状态到“已支付”
                        </div>
                        <el-divider />
                        <div class="go-setting">
                            <i class="fa fa-gg" aria-hidden="true"></i>
                            <span style="margin-left: 5px;" @click="goAuthPage(2)">去配置</span>
                        </div>
                    </el-card>
                </el-col>           
            </el-row>
        </el-card>
    </div>
</template>

<script>
import { reactive, toRefs, nextTick, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'

import api from '/@/api/commonAPi'


export default {
    name: 'Paysetting',
    components: {

    },
    setup(props) {
        const router = useRouter()
        const state = reactive({
            icon: {
                wechatAppIcon: 'https://17work-1304122643.cos.ap-guangzhou.myqcloud.com/17work/0/20230621/3E5C27033B16458582143B52F982E09C.png',
                wechatWebIcon: 'https://17work-1304122643.cos.ap-guangzhou.myqcloud.com/17work/0/20230621/E197AD92CF2B495ABF7201C51DC574C0.png',
                aliPayIcon: 'https://17work-1304122643.cos.ap-guangzhou.myqcloud.com/17work/0/20230621/BA6C31B3C69C4B98ABE700D611B44F82.png',
                ebankIcon: 'https://17work-1304122643.cos.ap-guangzhou.myqcloud.com/17work/0/20230621/7F0FBEC8DC464750BBFB4B8631467679.png',
                bankCardIcon: 'https://17work-1304122643.cos.ap-guangzhou.myqcloud.com/17work/0/20230621/4731AF1825AB45ACB4E4CCCDBC275701.png',
            },
            openSwitch: {
                wechatApp: 0,
                wechatWeb: 0,
                aliPay: 0,
                ebank: 0,
                bankCard: 0
            },
        })
        // 去授权/配置
        const goAuthPage = val => {
            if (val == 0) {
                router.push({
                    path: '/shop/wechatApp',
                    query: {
                        type: '1'
                    }
                })
            }else if(val == 1){                
                router.push({
                    path: '/shop/addHostBinding'
                })
            }else {
                router.push({
                    path: '/shop/appsetting'
                })
            }
        }
        // 获取支付设置
        const paySetting = () => {
            api.getPaySetting().then(res => {
                state.openSwitch = {
                    wechatApp: res.data['0'].status == 1?true:false,
                    wechatWeb: res.data['1'].status == 1?true:false,
                    aliPay: res.data['2'].status == 1?true:false,
                    ebank: res.data['3'].status == 1?true:false,
                    bankCard: res.data['4'].status == 1?true:false,
                }
            })
        }
        // 改变支付状态
        const editPaySetting = (val, status) => {
            api.editPaySetting({type: val, status: status?1:0}).then(res => {
                ElMessage.success("设置成功")
            })
        }

        onMounted(() => {
            paySetting()
        })
        return {
            ...toRefs(state),
            goAuthPage,
            paySetting,
            editPaySetting,
        }
    }
}

</script>

<style lang="scss" scoped>
.box-card {    
    height: 96vh;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.card-box {
    width: 350px;
    height: 185px;
    margin-bottom: 60px;
}

.card-title-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 20px;
}

.open-or-close {
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    margin-left: auto; 
    margin-right: 0;
}

.card-center-txt {
    height: 40px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999;
    line-height: 20px;
    margin-bottom: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.go-setting {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -10px;
    color: #666;
    cursor: pointer;
}

</style>

